<template>
  <div class="jm-sheet-toolbar-btns" style=" font-size:12">
    <div class="" style="display: inline-block;">
      <Tooltip content="预览" placement="bottom">
        <div class="jm-sheet-toolbar-btn" data-tooltip="预览">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img view"></div>
          </div>

        </div>
      </Tooltip>
      <div class="jm-sheet-toolbar-divider"></div>
      <Tooltip content="保存" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img save"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="格式刷" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img paintformat"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="清除格式" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img clearformat"></div>
          </div>
        </div>
      </Tooltip>
      <div class="jm-sheet-toolbar-divider"></div>
      <Tooltip content="数据格式" placement="bottom">
        <Dropdown placement="bottom-start" :transfer="true" @on-click="selectDataFormat" style="    margin: 1px 1px 2px 1px;">
          <a href="javascript:void(0)">
            {{dataformatText}}
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>

          </a>
          <DropdownMenu slot="list" style="width: 220px; display: block;">
            <DropdownItem ref="list" :name="item.name" v-for="(item,index) in dataformat" :key="index">
              {{item.title}}
              <div class="item-label">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;"> {{item.pattern}}</font>
                </font>
              </div>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Tooltip>
      <div class="jm-sheet-toolbar-divider"></div>
      <Tooltip content="字体" placement="bottom">
        <Dropdown placement="bottom-start" :transfer="true" @on-click="selectfontfamily" style="margin: 1px 1px 2px 1px;">
          <a href="javascript:void(0)">
            {{fontfamilyText}}
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>

          </a>
          <DropdownMenu slot="list" style="width: 220px; display: block;">
            <DropdownItem ref="list" :name="item.name" v-for="(item,index) in fontfamily" :key="index">
              {{item.name}}
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Tooltip>
      <Tooltip content="字号" placement="bottom">
        <Dropdown placement="bottom-start" :transfer="true" @on-click="selectfontSize" style="margin: 1px 1px 2px 1px;">
          <a href="javascript:void(0)">
            {{fontsizeText}}
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>
          </a>
          <DropdownMenu slot="list" style="width: 220px; display: block;">
            <DropdownItem ref="list" :name="item.name" v-for="(item,index) in fontsize" :key="index">
              {{item.name}}
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Tooltip>
      <div class="jm-sheet-toolbar-divider"></div>
      <Tooltip content="加粗" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img font-bold"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="倾斜" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img font-italic"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="下划线" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img underline"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="删除线" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-icon">
            <div class="jm-sheet-icon-img strike"></div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="字体颜色" placement="bottom">
        <div class="jm-sheet-toolbar-btn">
          <div class="jm-sheet-dropdown bottom-left">
            <div class="jm-sheet-dropdown-header">
              <CustomColorPicker size="small" recommend icon="color" v-model='fontColor' />
            </div>
          </div>
        </div>
      </Tooltip>
      <Tooltip content="填充颜色" placement="bottom">
        <div class="jm-sheet-toolbar-divider"></div>
        <div class="jm-sheet-toolbar-btn" data-tooltip="">
          <div class="jm-sheet-dropdown bottom-left">
            <div class="jm-sheet-dropdown-header">
              <CustomColorPicker size="small" recommend icon="bgcolor" v-model='backGroundColor' />
            </div>
          </div>
        </div>
      </Tooltip>
      <div class="jm-sheet-toolbar-btn" data-tooltip="边框">
        <div class="jm-sheet-dropdown bottom-left" >
          <div class="jm-sheet-dropdown-header"  @click="toggleborder" >
            <div class="jm-sheet-icon" >
              <div class="jm-sheet-icon-img border-all"></div>
            </div>
          </div>
          <div class="jm-sheet-dropdown-content" v-show="borderVisible">
            <div class="jm-sheet-border-palette">
              <table class="">
                <tbody class="">
                  <tr class="">
                    <td class="jm-sheet-border-palette-left">
                      <table class="">
                        <tbody class="">
                          <tr class="">
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-all"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-inside"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-horizontal"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-vertical"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-outside"></div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr class="">
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-left"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-top"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-right"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-bottom"></div>
                                </div>
                              </div>
                            </td>
                            <td class="">
                              <div class="jm-sheet-border-palette-cell">
                                <div class="jm-sheet-icon">
                                  <div class="jm-sheet-icon-img border-none"></div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td class="jm-sheet-border-palette-right">
                      <div class="jm-sheet-toolbar-btn">
                        <div class="jm-sheet-dropdown bottom-left">
                          <div class="jm-sheet-dropdown-header">
                            <div class="jm-sheet-icon" style="height: 16px; border-bottom: 3px solid rgb(0, 0, 0);">
                              <div class="jm-sheet-icon-img line-color"></div>
                            </div>
                          </div>
                          <div class="jm-sheet-dropdown-content" style="width: auto; display: none;">
                            <div class="jm-sheet-color-palette">
                              <table class="">
                                <tbody class="">
                                  <tr class="jm-sheet-theme-color-placeholders">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(255, 255, 255);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(0, 1, 0);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(231, 229, 230);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(68, 85, 105);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(91, 156, 214);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(237, 125, 49);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(165, 165, 165);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(255, 192, 1);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(67, 113, 198);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(113, 174, 71);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-theme-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(242, 242, 242);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(127, 127, 127);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(208, 206, 207);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(213, 220, 228);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(222, 234, 246);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(252, 229, 213);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(237, 237, 237);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(255, 242, 205);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(217, 226, 243);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(227, 239, 217);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-theme-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(216, 216, 216);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(89, 89, 89);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(175, 171, 172);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(173, 184, 202);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(189, 215, 238);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(247, 204, 172);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(219, 219, 219);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(255, 229, 154);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(179, 198, 231);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(197, 224, 179);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-theme-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(191, 191, 191);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(63, 63, 63);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(117, 111, 111);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(133, 150, 176);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(156, 194, 230);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(244, 177, 132);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(201, 201, 201);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(254, 217, 100);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(142, 170, 218);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(167, 208, 140);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-theme-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(165, 165, 165);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(38, 38, 38);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(58, 56, 57);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(51, 63, 79);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(46, 117, 181);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(196, 90, 16);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(123, 123, 123);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(191, 142, 1);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(47, 85, 150);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(83, 129, 54);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-theme-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(127, 127, 127);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(12, 12, 12);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(23, 21, 22);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(34, 42, 53);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(31, 78, 122);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(132, 60, 10);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(82, 82, 82);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(126, 96, 0);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(32, 56, 100);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(54, 86, 36);"></div>
                                    </td>
                                  </tr>
                                  <tr class="jm-sheet-standard-colors">
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(192, 0, 0);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(254, 0, 0);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(253, 193, 1);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(255, 255, 1);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(147, 208, 81);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(0, 176, 78);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(1, 176, 241);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(1, 112, 193);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(1, 32, 96);"></div>
                                    </td>
                                    <td class="">
                                      <div class="jm-sheet-color-palette-cell" style="background-color: rgb(112, 48, 160);"></div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <div class=""><input class="" placeholder="支持自定义颜色代码" style="background-color:#fff;height:21px;line-height:21px;border:1px solid #ddd;text-align:center;width:100%;font-size:14px"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jm-sheet-toolbar-btn">
                        <div class="jm-sheet-dropdown bottom-left">
                          <div class="jm-sheet-dropdown-header">
                            <div class="jm-sheet-icon">
                              <div class="jm-sheet-icon-img line-type"></div>
                            </div>
                          </div>
                          <div class="jm-sheet-dropdown-content" style="width: auto; display: none;">
                            <div class="jm-sheet-item state checked">
                              <div class="jm-sheet-line-type"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" style="user-select: none;">
                                  <line x1="0" y1="0.5" x2="50" y2="0.5" stroke-width="1" stroke="black" style="user-select: none;"></line>
                                </svg></div>
                            </div>
                            <div class="jm-sheet-item state ">
                              <div class="jm-sheet-line-type"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="2" style="user-select: none;">
                                  <line x1="0" y1="1.0" x2="50" y2="1.0" stroke-width="2" stroke="black" style="user-select: none;"></line>
                                </svg></div>
                            </div>
                            <div class="jm-sheet-item state ">
                              <div class="jm-sheet-line-type"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="3" style="user-select: none;">
                                  <line x1="0" y1="1.5" x2="50" y2="1.5" stroke-width="3" stroke="black" style="user-select: none;"></line>
                                </svg></div>
                            </div>
                            <div class="jm-sheet-item state ">
                              <div class="jm-sheet-line-type"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" style="user-select: none;">
                                  <line x1="0" y1="0.5" x2="50" y2="0.5" stroke-width="1" stroke="black" stroke-dasharray="2" style="user-select: none;"></line>
                                </svg></div>
                            </div>
                            <div class="jm-sheet-item state ">
                              <div class="jm-sheet-line-type"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" style="user-select: none;">
                                  <line x1="0" y1="0.5" x2="50" y2="0.5" stroke-width="1" stroke="black" stroke-dasharray="1" style="user-select: none;"></line>
                                </svg></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn disabled" data-tooltip="合并单元格">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img merge"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="水平对齐">
        <div class="jm-sheet-dropdown bottom-left">
          <div class="jm-sheet-dropdown-header">
            <div class="jm-sheet-icon arrow-left">
              <div class="jm-sheet-icon-img align-left"></div>
            </div>
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>
          </div>
          <div class="jm-sheet-dropdown-content" style="width: auto; display: none;">
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-left"></div>
              </div>
            </div>
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-center"></div>
              </div>
            </div>
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="垂直对齐">
        <div class="jm-sheet-dropdown bottom-left">
          <div class="jm-sheet-dropdown-header">
            <div class="jm-sheet-icon arrow-left">
              <div class="jm-sheet-icon-img align-middle"></div>
            </div>
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>
          </div>
          <div class="jm-sheet-dropdown-content" style="width: auto; display: none;">
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-top"></div>
              </div>
            </div>
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-middle"></div>
              </div>
            </div>
            <div class="jm-sheet-item">
              <div class="jm-sheet-icon">
                <div class="jm-sheet-icon-img align-bottom"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="自动换行">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img textwrap"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="单元格表达式">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img cell-exp"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="单元格斜线">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img cell-line"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
    </div>
    <div class="" style="display: inline-block;">
      <div class="jm-sheet-toolbar-btn" data-tooltip="图表">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img chart"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="插入图片">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img img"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="二维码">
        <div class="jm-sheet-dropdown bottom-left">
          <div class="jm-sheet-dropdown-header">
            <div class="jm-sheet-icon arrow-left">
              <div class="jm-sheet-icon-img qrcode"></div>
            </div>
            <div class="jm-sheet-icon arrow-right">
              <div class="jm-sheet-icon-img arrow-down"></div>
            </div>
          </div>
          <div class="jm-sheet-dropdown-content" style="width: 150px; display: none;">
            <div class="jm-sheet-item">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">二维码</font>
              </font>
            </div>
            <div class="jm-sheet-item">
              <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">条形码</font>
              </font>
            </div>
          </div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="上传excel">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img uploadExcel"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="打印设置">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img print-setting"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="预览工具条设置">
        <div class="jm-sheet-icon">
          <div class="jm-sheet-icon-img view-setting"></div>
        </div>
      </div>
      <div class="jm-sheet-toolbar-divider"></div>
      <div class="jm-sheet-toolbar-btn" data-tooltip="更多" style="display: none;">
        <div class="jm-sheet-dropdown bottom-right">
          <div class="jm-sheet-dropdown-header">
            <div class="jm-sheet-icon">
              <div class="jm-sheet-icon-img ellipsis"></div>
            </div>
          </div>
          <div class="jm-sheet-dropdown-content" style="width: auto; display: none; max-width: 420px;">
            <div class="jm-sheet-toolbar-more"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import "@/assets/tools.css";
import CustomColorPicker from "@/components/colorPicker";
export default {
  name: "tools",
  components: { CustomColorPicker },
  data() {
    return {
      dataformatText: '正常',
      fontfamilyText: 'Microsoft YaHei',
      fontsizeText: 10,
      fontColor: "#000000",
      backGroundColor: "#ffffff",
      borderVisible: false,
      dataformat: [
        {
          title: '正常',
          name: 'normal',
          pattern: ""
        },
        {
          title: '百分比',
          name: 'percent',
          pattern: "100.00%"
        },
        {
          title: '人民币',
          name: 'rmb',
          pattern: "￥100.00"
        },
        {
          title: '美元',
          name: 'usd',
          pattern: "$100.00"
        },
        {
          title: '欧元',
          name: 'eur',
          pattern: "€100.00"
        },
        {
          title: '短日期',
          name: 'date',
          pattern: "2020/10/10"
        },
        {
          title: '长日期',
          name: 'date2',
          pattern: "2021年11月11日"
        },
        {
          title: '时间',
          name: 'time',
          pattern: "10:10:10"
        },
        {
          title: '正常',
          name: '',
          pattern: ""
        },
        {
          title: '日期+时间',
          name: 'datetime',
          pattern: "2020/10/10 10:10:10"
        }
      ],
      fontfamily: [
        { name: '宋体' },
        { name: '仿宋' },
        { name: '黑体' },
        { name: '楷体' },
        { name: 'Microsoft YaHei' },
        { name: 'Arial' },
        { name: 'Impact' },
        { name: 'Times New Roman' },
        { name: 'Comic Sans MS' },
      ],
      fontsize: [
        { name: 7.5 },
        { name: 8 },
        { name: 9 },
        { name: 10 },
        { name: 10.5 },
        { name: 11 },
        { name: 12 },
        { name: 14 },
        { name: 15 },
        { name: 16 },
        { name: 18 },
        { name: 22 },
        { name: 26 },
        { name: 36 },
        { name: 42 }

      ]

    }

  },
  methods: {
    toggleborder(){
      this.borderVisible=!this.borderVisible;
    },
    selectDataFormat(name) {
      let _this = this;
      this.dataformat.forEach(function (item, index) {
        if (item.name == name) {
          _this.dataformatText = item.title
        }
      })
    },
    selectfontfamily(name) {
      this.fontfamilyText = name
    },
    selectfontSize(name) {
      this.fontsizeText = name
    },
  }

}
</script>

